<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>用户列表</title>

    <link rel="stylesheet" type="text/css" th:href="@{/pubilc/plugin/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/pubilc/plugin/css/admin.css}"/>
</head>

<body>
<div class="page-content-wrap">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-filter="aihao">
                        <option value=""></option>
                        <option value="subscribe">关注发送</option>
                        <option value="word">关键词</option>
                    </select>
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" lay-filter="search" lay-submit>搜索</button>
        </div>
    </form>
    <button class="layui-btn layui-btn-info" lay-filter="add" lay-submit>新增</button>
    <div class="layui-form" id="table-list">
        <table class="layui-hide" id="table" lay-filter="table"></table>
    </div>
</div>
<script th:src="@{/pubilc/plugin/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/pubilc/plugin/js/common.js}" type="text/javascript" charset="utf-8"></script>

<script type="text/html" id="barTool" lay-filter="barTool">
    <a class="layui-btn layui-btn-success layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['jquery', 'table', 'form', 'laydate'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#time'
        });

        var tableIns = table.render({
            elem: '#table'
            , url: parent.basePath + '/play/page/getContentList'
            , cellMinWidth: 80
            , page: true
            , limit: 15
            , cols: [[
                {field: 'id', width: 80, title: 'ID'}
                , {
                    field: 'type', width: 100, title: '类型', templet: function (d) {
                        if (d.type == "subscribe") {
                            return '关注发送';
                        }
                        if (d.type == "word") {
                            return '关键词回复';
                        }
                        return d.type;
                    }
                }
                , {field: 'word', width: 150, title: '关键词'}
                , {field: 'url', width: 250, title: '点击发送地址'}
                , {field: 'picUrl', width: 250, title: '图片地址'}
                , {field: 'title', width: 150, title: '标题'}
                , {field: 'content', width: 400, title: '内容'}
                , {fixed: 'right', title: '操作', toolbar: '#barTool', width: 150}
            ]]
            , response: {
                countName: 'total' //规定数据总数的字段名称，默认：count
                , dataName: 'list' //规定数据列表的字段名称，默认：data
            }
        });

        //查询
        form.on('submit(search)', function (data) {
            tableIns.reload({where: data.field});
            return false
        });

        //工具栏事件
        table.on('tool(table)', function (obj) {
            switch (obj.event) {
                case 'detail':
                    layer.open({
                        type: 1,
                        area: ['80%', '80%'],
                        scrollbar: false,
                        title: '详情',
                        content: $('#ListForm'),
                        shade: 0
                    });
                    $("#ListFormBtn").hide();
                    setValue(obj.data);
                    break;

                case 'edit':
                    layer.open({
                        type: 1,
                        area: ['80%', '80%'],
                        scrollbar: false,
                        title: '修改',
                        content: $('#ListForm'),
                        shade: 0
                    });
                    setValue(obj.data);
                    $("#ListFormBtn").show();
                    break;

                case 'del':
                    //询问框
                    layer.confirm('您确定要删除吗？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        layer.msg('暂不支持', {icon: 1});
                    }, function () {
                        layer.close(layer.index);
                        return;
                    });

                    break;
            }
        });


        //赋值
        function setValue(data) {
            for (index in  $("#ListForm form input")) {
                let name = $("#ListForm form input")[index].name;
                if (name != '') {
                    $("[name=" + name + "]").val(data[name]);
                }
            }
            for (index in  $("#ListForm form select")) {
                let name = $("#ListForm form select")[index].name;
                if (name != '') {
                    $("[name=" + name + "]").val(data[name]);
                }
            }
            if (data.type == "subscribe") {
                $("#type").attr("disabled", "disabled");
            } else {
                $("#type").removeAttr("disabled");
            }
            form.render();
        };

        //修改提交
        form.on('submit(submit)', function (data) {
            layer.confirm('您确定修改吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: parent.basePath + '/play/page/updateContent',
                    data: data.field,
                    type: "POST",
                    cache: false,
                    dataType: 'json',
                    error: function (request) {
                        alert("发送请求失败！");
                    },
                    success: function (json) {
                        if (json.code == 0) {
                            layer.msg(json.msg);
                            setTimeout(function () {
                                layer.closeAll();
                                tableIns.reload();
                            }, 1000);
                        } else {
                            layer.msg(json.msg);
                        }
                    }
                });
            }, function () {
                layer.close(layer.index);
                return false;
            });
            return false
        });

        //关闭按钮
        form.on('submit(close)', function (data) {
            layer.closeAll();
            return false;
        });


    });
</script>
<div style="display: none" id="ListForm" lay-filter="ListForm">
    <form class="layui-form" action="">
        <input type="text" name="id" autocomplete="off" class="layui-input" type="hidden">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" autocomplete="off" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="type" id="type" lay-filter="type">
                        <option value=""></option>
                        <option value="subscribe">关注发送</option>
                        <option value="word">关键词</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">关键词</label>
            <div class="layui-input-block">
                <input type="text" name="word" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">跳转链接</label>
            <div class="layui-input-block">
                <input type="text" name="url" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">照片地址</label>
            <div class="layui-input-block">
                <input type="text" name="picUrl" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <input type="text" name="content" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-row" id="ListFormBtn">
            <div class="layui-col-md4 layui-col-md-offset4">
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-normal" lay-filter="submit" lay-submit>提交</button>
                    <button class="layui-btn layui-btn-danger" lay-filter="close" lay-submit>关闭</button>
                </div>
            </div>
        </div>

    </form>
</div>

</body>
</html>